<template>
  <div class="admin">
    <el-card v-loading="pager.loading" class="!border-none" shadow="never">
      <div class="flex justify-between">
        <el-form :inline="true">
          <el-form-item label="手机号">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getLists">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleAdd" class="mb-5"  v-perms="['user/add']">
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
      </div>

      <div class="mt-4">
        <el-table :data="pager.lists" size="large">
          <!-- <el-table-column label="用户名称" prop="userName" min-width="100" /> -->
          <el-table-column label="手机号" min-width="100">
            <template #default="{ row }">
              {{ row.phone || '—' }}
            </template>
          </el-table-column>
          <el-table-column label="是否为会员" min-width="100">
            <template #default="{ row }">
              <el-tag type="primary" v-if="row.memberStatus">是</el-tag>
              <el-tag type="error" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="虚拟币余额" min-width="100">
            <template #default="{ row }">
              {{ row.goldNum || '—' }}
            </template>
          </el-table-column>
          <el-table-column label="会员开始时间" min-width="150">
            <template #default="{ row }">
              {{
                row.vipStartTime
                  ? $formatDt(row.vipStartTime, 'yyyy-MM-dd HH:mm:ss')
                  : '—'
              }}
            </template>
          </el-table-column>
          <el-table-column label="会员结束时间" min-width="150">
            <template #default="{ row }">
              {{
                row.vipEndTime
                  ? $formatDt(row.vipEndTime, 'yyyy-MM-dd HH:mm:ss')
                  : '—'
              }}
            </template>
          </el-table-column>

          <el-table-column label="注册时间" min-width="150">
            <template #default="{ row }">
              {{
                row.createTime
                  ? $formatDt(row.createTime, 'yyyy-MM-dd HH:mm:ss')
                  : '—'
              }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="300">
            <template #default="{ row }">
              <div class="flex items-center">
                <el-button
                  type="primary"
                  link
                   v-perms="['user/setgold']"
                  @click="handleToGoid(row.id, row.userName)"
                >
                  增加虚拟币
                </el-button>

                <el-button
                  type="primary"
                  link
                   v-perms="['user/setgold']"
                  @click="
                    handleChangeVip(
                      row.id,
                      row.userName,
                      row.vipStartTime,
                      row.vipEndTime
                    )
                  "
                >
                  设置VIP到期时间
                </el-button>

                <el-dropdown class="ml-3" 
                   v-perms="['user/setgold']">
                  <span class="el-dropdown-link">
                    更多
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleConsumptionDetail(row)"
                        >充值记录</el-dropdown-item
                      >
                      <el-dropdown-item @click="handlePayRecords(row)"
                        >支付记录</el-dropdown-item
                      >
                      <el-dropdown-item @click="handleRechargeDetail(row)"
                        >Agent消费记录</el-dropdown-item
                      >
                      <el-dropdown-item @click="handleUsageRanking(row)"
                        >Agent使用排名</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </div>
    </el-card>

    <el-dialog
      v-model="showPopup"
      :title="`设置${vipName}的VIP到期时间`"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="flex py-5">
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
        <el-button type="primary" class="ml-4" @click="handleUpdateVip"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="handleSuccess"
      @close="showEdit = false"
    />
    <ConsumptionDetail v-model="showConsumptionDialog" :vipId="vipId" />

    <RechargeDetail v-model="showRechargeDialog" :vipId="vipId" />
    <UsageRanking v-model="showUsageRanking" :vipId="vipId" />
    <payRecords v-model="showPayRecords" :vipId="vipId" />
  </div>
</template>

<script setup name="admin">
  import { ref } from 'vue';
  import { getList, update } from '@/apis/user/user';
  import { usePaging } from '@/hooks/usePaging';
  import feedback from '@/utils/feedback';
  import EditPopup from './edit.vue';
  import ConsumptionDetail from './ConsumptionDetail.vue';
  import RechargeDetail from './RechargeDetail.vue';
  import UsageRanking from './UsageRanking.vue';
  import payRecords from './payRecords.vue';

  const showPopup = ref(false);
  const showConsumptionDialog = ref(false);
  const showRechargeDialog = ref(false);
  const showUsageRanking = ref(false);
  const showPayRecords = ref(false);
  const date = ref('');
  const vipName = ref('');
  const vipId = ref('');
  const editRef = ref(null);
  const showEdit = ref(false);
  const queryParams = reactive({
    type: 0, // 1: 代理, 0: 用户
    phone: '',
  });
  const timeValue = ref([]);

  const handleSuccess = type => {
    getLists();
  };

  const handlePayRecords = row => {
    showPayRecords.value = true;
    vipId.value = row.id;
  };

  const handleChangeVip = async (id, name, startTime, endTime) => {
    timeValue.value = [startTime, endTime];
    vipName.value = name;
    vipId.value = id;
    showPopup.value = true;
  };
  const handleUpdateVip = async () => {
    if (timeValue.value.length == 0) {
      feedback.msgError('请选择到期时间');
      return;
    }
    if (timeValue.value[0] > timeValue.value[1]) {
      feedback.msgError('到期时间不能小于开始时间');
      return;
    }
    await update({
      id: vipId.value,
      vipStartTime: timeValue.value[0],
      vipEndTime: timeValue.value[1],
    });
    showPopup.value = false;
    feedback.msgSuccess('设置成功');
    getLists();
  };

  const handleToGoid = async (id, name) => {
    const goldNum = await feedback.prompt(`请输入给${name}的虚拟币数量`);
    if (goldNum.value == '') {
      feedback.msgError('请输入有效的虚拟币数量');
      return;
    }
    await update({ id, goldNum: goldNum.value });
    feedback.msgSuccess('虚拟币发放成功');
    getLists();
  };

  const handleConsumptionDetail = row => {
    showConsumptionDialog.value = true;
    vipId.value = row.id;
  };

  const handleRechargeDetail = row => {
    showRechargeDialog.value = true;
    vipId.value = row.id;
  };

  const handleUsageRanking = row => {
    showUsageRanking.value = true;
    vipId.value = row.id;
  };

  const { pager, getLists } = usePaging({
    fetchFun: getList,
    params: queryParams,
  });

  const handleAdd = async () => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open('add');
  };

  onMounted(() => {
    getLists();
  });
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    outline: none;
  }

  .tab {
    display: flex;
    margin: 16px 0;
    border-bottom: 1px solid #e4e7ed;
  }

  .tab-item {
    padding: 12px 24px;
    cursor: pointer;
    color: #606266;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    font-weight: 500;
  }

  .tab-item:hover {
    color: var(--el-color-primary);
  }

  .tab-item.active {
    color: var(--el-color-primary);
    border-bottom-color: var(--el-color-primary);
  }
</style>
